<template>
  <div style="width: 110%;height:1300px;overflow-y:hidden" class="f1bgImg" >
    <!--  页面一级-->
    <div style="width: 1200px;height: 100%;margin: 0 auto;">
      <!-- 页面二级-->
      <!-- logo图标-->
      <div>
        <v-img src="../../../fengyu-web/public/imgs/originImgs/666.png"
               style="width: 120px;height: 120px;margin: 0 auto;">
        </v-img>
        <div style="font-family: '苹方 常规',serif;font-size: 15px;font-weight: bold;color: #2f2f2f;
                  margin: -25px auto;text-align: center;">
          FENG YU
        </div>
        <div style="font-family: Aa疯狂原始人,serif;margin: 25px auto;text-align: center;
                  font-size: 55px;font-weight: 420;color: #2f2f2f;">
          枫语:第一印象交流平台!
        </div>
      </div>
      <!--zzr二维码-->
      <div style="margin-left: 10px;margin-top: 50%;float: left;">
        <v-img src="../../../fengyu-web/public/imgs/originImgs/zzrwx.png"
               style="width: 100px;height: 100px;left: 10px">
        </v-img>
        <div style="font-size: 12px;font-family: '苹方 常规';color: #767373;">
          您的意见是社区的财富
        </div>
      </div>

      <!--   登录模块   -->
      <div style="margin-top: 80px;">
        <v-card
            class="mx-auto"
            hover
            style="float: left;left: 110px"
        >
          <!--微信扫描区-->
          <v-sheet style="width: 332px;height: 507px;background-color:rgb(244,243,235);">
            <div style="font-weight: 400;font-family: '苹方 常规';font-size: 20px;
                      padding-top: 40px;text-align: center;">
              微信登录
            </div>
            <div style="font-weight: 400;
            font-family: '苹方 常规';
            text-align: center;
            font-size: 12px;
            color: #767373;
            margin-top: 20px;">
              打开「微信」扫描二维码登录枫言
            </div>
            <v-img src="../../../fengyu-web/public/imgs/originImgs/FengYuTestCode.png"
                   style="width: 200px;height: 200px;margin-left: 68px;margin-top: 35px;
                 background-color:rgba(232,228,213,0.78)">
            </v-img>
            <div style="font-family: '苹方 常规';font-size: 14px;margin-top:20px;
                      text-align:center;color: #767373;">
              未注册用户使用扫码登录自动注册
            </div>
            <div style="margin-top: 20px;font-size: 12px;text-align: center;
                      font-family: '苹方 常规';color: #767373">
              若不能显示出「游客登录」「用户协议」请调整页面缩放
            </div>
            <div style="font-family: '苹方 常规';font-size: 14px;text-align: center;
                      margin-top:20px;color: #6f6a6a;">
              <v-row style="margin: 0">
                <v-col cols="4" style="text-align: right;">更快</v-col>
                <v-col cols="4">更安全</v-col>
                <v-col cols="4" style="text-align: left ;">更便捷</v-col>
              </v-row>
            </div>
          </v-sheet>
        </v-card>
        <v-card
            class="mx-auto"
            hover
            style="float: right;right: 220px"
        >
          <!--账号登录区-->
          <v-sheet style="width:401px;height: 507px;background-color:rgb(241,238,232);">
            <div style="font-family: '苹方 常规';font-weight: 400;font-size: 17px;
            text-align: center;padding-top: 40px">
              账号登录
            </div>
            <hr class="custom-hr">
            <!--用户登录输入框及按钮-->
            <v-sheet class="mx-auto" width="300"
                     style="background-color: rgba(47,47,47,0);margin-top: 40px;">
              <v-form fast-fail @submit.prevent style="background-color: rgb(241,238,232);">
                <!--账号输入框-->
                <v-text-field v-model="user.username"
                              :rules="firstNameRules"
                              label="用户ID/手机号"
                              style="color: rgb(0,0,0);background-color: rgba(241,238,232,0);">
                </v-text-field>
                <!--密码输入框-->
                <v-text-field
                    v-model="user.password"
                    :rules="lastNameRules"
                    label="密码"
                    :type="show1 ? 'text' : 'password'"
                    :append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
                    @click:append="show1 = !show1"
                    style="color: rgb(0,0,0);background-color: rgba(241,238,232,0);width: 340px;margin-top: 10px">
                </v-text-field>
                <!--登录按钮-->
                <v-btn class="mt-2"
                       type="submit"
                       block
                       style="font-family: '苹方 常规';"
                       @click="Login()">
                  登录
                </v-btn>
                <!--注册按钮-->
                  <v-dialog v-model="dialog" max-width="600">
                    <template v-slot:activator="{ props: activatorProps }">
                      <v-btn class="mt-2"
                             block
                             text="注册"
                             v-bind="activatorProps"
                             style="background-color: white;font-family: '苹方 常规'"
                             elevation="1.05">
                      </v-btn>
                    </template>

                    <v-card prepend-icon="mdi-account" title="用户注册">
                      <v-card-text>
                        <v-row dense>
                          <v-col cols="12">
                            <v-text-field label="新建账号"
                                          required
                                          :rules="rulesIdReg"
                                          hide-details="auto"
                                          v-model="saveUserForm.username">
                            </v-text-field>
                          </v-col>
                          <v-col cols="12">
                            <v-text-field label="输入密码"
                                          required
                                          :rules="rulesPassReg"
                                          hide-details="auto"
                                          v-model="saveUserForm.password">
                            </v-text-field>
                          </v-col>
                          <v-col cols="12">
                            <v-text-field label="输入昵称"
                                          required
                                          :rules="rulesNickReg"
                                          hide-details="auto"
                                          v-model="saveUserForm.nickname">
                            </v-text-field>
                          </v-col>
                        </v-row>
                        <small class="text-caption text-medium-emphasis">*表必填字段</small>
                      </v-card-text>

                      <v-divider></v-divider>

                      <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn text="关闭"
                               variant="plain"
                               @click="dialog = false;closeReg()">
                        </v-btn>
                        <v-btn color="primary"
                               text="提交注册"
                               variant="tonal"
                               @click="dialog = false;saveUser();">
                        </v-btn>
                      </v-card-actions>
                    </v-card>
                  </v-dialog>
                <!--游客按钮-->
                <v-btn class="mt-2"
                       type="submit"
                       block
                       style="font-family: '苹方 常规';background-color: #f4edcd">
                  游客进入
                </v-btn>
              </v-form>
              <!--用户协议勾选-->
              <v-row>
                <v-col cols="6">
                  <v-checkbox color="orange"
                              label="勾选表示同意"
                              style="transform:scale(0.8);font-family: '苹方 常规';color: #000000;float: left;margin-top: 20px;margin-left: -20px">
                  </v-checkbox>
                </v-col>
                <div class="text-center" style="position: relative;top:40px;left: 5px">
                  <v-btn
                      @click="snackbar = true"
                      size="0px"
                      style="font-family: '苹方 常规';
                       font-size: 13px;
                       color: #7373f6;
                       text-decoration: underline;"
                  >
                    《用户协议》
                  </v-btn>
                  <!--用户协议点击详情-->
                  <v-snackbar
                      v-model="snackbar"
                      vertical
                  >
                    <div class="text-subtitle-1 pb-2" >这是测试的协议标题第一个</div>
                    <p>这是测试的协议文本第一段,这是测试的协议文本第一段</p>
                    <p>这是测试的协议文本第二段<br>这是测试的协议文本第二段</p>

                    <div class="text-subtitle-1 pb-2" >这是测试的协议标题第二个</div>

                    <template v-slot:actions>
                      <v-btn
                          color="pink"
                          variant="text"
                          @click="snackbar = false"
                      >
                        关闭
                      </v-btn>
                    </template>
                  </v-snackbar>
                </div>
              </v-row>
<!--              <v-snackbar v-model="snackbar" vertical>-->
<!--                <template v-slot:actions>-->
<!--                  <v-btn color="pink" variant="text" @click="snackbar = false">关闭</v-btn>-->
<!--                </template>-->
<!--              </v-snackbar>-->
            </v-sheet>
          </v-sheet>
        </v-card>
      </div>
    </div>
  </div>
</template>

<script >
import {values} from "core-js/stable/dom-collections";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
import qs from "qs";

export default {
  data: ()=>({
    // user:['username','password','nickname'],
    user:{username:'',password:''},
    saveUserForm:{username:'',password:'',nickname:''},

    //登录页账号//
    firstNameRules: [
      value => {
        if (value?.length < 1) {
          return '请输入账号';
        } else if (!/^\d+$/.test(value)) {
          return '账号不能包含字母和字符';
        }
        return true;
      }
    ],

    //登录页密码//
    userid:'',
    userpassword: '',
    snackbar: false,
    show1: false,
    lastNameRules: [
      value => {
        if (value?.length < 6) {
          return '密码不低于6位';
        } else if (!/[a-zA-Z]/.test(value)) {
          return '密码必须包含至少一个字母';
        }
        return true;
      }
    ],
    //注册输入密码//
    rulesPassReg: [
      value => {
        if (value?.length < 6) {
          return '密码不低于6位';
        } else if (!/[a-zA-Z]/.test(value)) {
          return '密码必须包含至少一个字母';
        }
        return true
      }
    ],
    //登录页账号//
    rulesIdReg: [
      value => {
        if (value?.length < 1) {
          return '请输入账号';
        } else if (!/^\d+$/.test(value)) {
          return '账号不能包含字母和字符';
        }
        return true;
      }
    ],

    rulesNickReg: [
      value => {
        if (value?.length < 1) {
          return '请输入昵称';
        } else if (value?.length > 8) {
          return '昵称不能超过8位数';
        } else if (!/^[A-Za-z0-9\u4e00-\u9fa5]*$/.test(value)) {
          return '账号不能包含字母和字符';
        }
        return true;
      }
    ],

    /* return: {
    //   userid:'',
    //   userpassword: '',
    //   show1: false,
       }*/

    dialog: false,

  }),
  methods: {
    // ... 其他方法
    closeReg() {
      // 清空注册表单项
      this.saveUserForm.username = '';
      this.saveUserForm.passwordReg = '';
      this.saveUserForm.nicknameReg = '';
    },
    saveUser() {
      // 验证账号字段是否全为数字
      const accountRegex = /^\d+$/; // 正则表达式，用于匹配全数字字符串
      if (!accountRegex.test(this.saveUserForm.username)) {
        ElMessage.error('请检查注册限制：账号必须全是数字！');
        return; // 停止执行后续代码
      }
      const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;
      if (!passwordRegex.test(this.saveUserForm.password)) {
        ElMessage.error('请检查密码要求：密码不能低于6位数且必须包含数字和字母！');
        return; // 验证不通过，停止执行后续代码
      }

      // 使用this来引用data中的saveUserForm
      let data = qs.stringify(this.saveUserForm);
      console.log("这是注册信息:" + data);

      // 发送注册请求到后端
      axios.post(BASE_URL + '/v1/user/save/', data)
          .then((response) => {
            // 根据实际情况调整这里的逻辑
            if (response.data.code === 2000) {
              ElMessage.success('注册成功!');
              // 清空表单和关闭对话框的逻辑应在此处，但需根据实际需求调整
            } else {
              ElMessage.error(response.data.msg || '注册失败，请稍后再试');
            }
          })
          .catch((error) => {
            // 处理请求错误
            console.error('注册请求出错:', error);
            ElMessage.error('网络错误，注册失败');
          });
    },
    Login() {
      console.log(this.user);
      // let data = qs.stringify(this.user);
      axios.post(BASE_URL+'/v1/user/origin',this.user).then((response) => {
        //if (response.data.code == 2002) {
          localStorage.user = JSON.stringify(response.data.data);
        // console.log(getUser().signature);
          router.push('/home');
        /*} else {
          ElMessage.error(response.data.msg);
        }*/
      });
    },
  }
}
</script>

<style scoped>
/*文本竖排*/
.origin-text1 {
  writing-mode: vertical-rl; /* 从右至左竖排 */
  /* 如果希望从左至右竖排，可以使用 vertical-lr */
  text-orientation: upright; /* 保持字符为正向，而不是旋转 */
}

/*主背景图*/
.f1bgImg{
  background: #f2d1b5;background: url("../../public/imgs/originImgs/img.png");
  background-size: cover;
  height: calc(100vh - (100vw - 100%));
}

/*账号登录下的分割线*/
.custom-hr {
  border: none;
  height: 1.8px;
  background-color: #f3ba00;
  margin-top: 5px;
}
.custom-transparent-btn {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important; /* 添加这行来取消阴影 */
  color: #ef9045;
  text-decoration: underline;

}

</style>
